<template>
  <a-layout>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      v-if="this.$route.query.system==='数据管理'"
    >
      <!-- <div class="button-wrapper">

        <router-link :to="{path:'/import',query:{system:'数据管理'}}">
          <a-button type="primary" @click="removeActive">
            <a-icon type="import" />
            <span v-show="collapseBtn">导入</span>
          </a-button>
        </router-link>
        <router-link :to="{path:'/approval',query:{system:'数据管理'}}">
          <a-button @click="removeActive">
            <a-icon type="solution" />
            <span v-show="collapseBtn">审批</span>
          </a-button>
        </router-link>
      </div>-->

      <a-menu
        :selectedKeys="[this.$store.state.firstNavSelectedKey]"
        :openKeys="this.$store.state.openClickSelectedKey"
        @openChange="onOpenChange"
        @click="handleNavClick"
        mode="inline"
        theme="dark"
      >
      <a-menu-item key="0" title="首页">
        <a-icon type="dashboard" />
        <router-link :to="{path:'/dataManage/dashboard',query:{system:'数据管理'}}" v-show="collapseBtn">首页</router-link>
      </a-menu-item>
        <template v-for="item in dataManageMenu">
          <a-menu-item v-if="!item.children" :key="item.key">
            <a-icon :type="item.icon" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="item.key">
            <span slot="title">
              <a-icon :type="item.icon" />
              <span>{{ item.title }}</span>
            </span>
            <a-menu-item v-for="i in item.children" :key="i.key">
              <router-link :to="{path:i.htmlUrl,query:{system:'数据管理',menuId:i.value}}">{{i.title}}</router-link>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      v-if="this.$route.query.system==='监控管理'"
    >
      <a-menu
        :selectedKeys="[this.$store.state.firstNavSelectedKey]"
        :openKeys="this.$store.state.openClickSelectedKey"
        @openChange="onOpenChange"
        @click="handleNavClick"
        mode="inline"
        theme="dark"
      >
        <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="dashboard" />
            <span>监控</span>
          </span>
          <a-menu-item key="1">
            <router-link :to="{path:'/dashboard',query:{system:'监控管理'}}">看板</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title">
            <a-icon type="setting" />
            <span>配置</span>
          </span>
          <a-menu-item key="2">
            <router-link :to="{path:'/hostList',query:{system:'监控管理'}}">主机列表</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      v-if="this.$route.query.system==='业务管理'"
    >
      <a-menu
        :selectedKeys="[this.$store.state.firstNavSelectedKey]"
        :openKeys="this.$store.state.openClickSelectedKey"
        @openChange="onOpenChange"
        @click="handleNavClick"
        mode="inline"
        theme="dark"
      >
        <a-menu-item key="0" title="首页">
          <a-icon type="dashboard" />
         <router-link :to="{path:'/businessManage/dashboard',query:{system:'业务管理'}}" v-show="collapseBtn">首页</router-link>
        </a-menu-item>
        <a-menu-item key="1" title="需求管理">
            <a-icon type="profile" />
           <router-link :to="{path:'/needsManagement',query:{system:'业务管理'}}" v-show="collapseBtn">需求管理</router-link>
        </a-menu-item>
        <a-menu-item key="2" title="任务管理">
            <a-icon type="carry-out" />
           <router-link :to="{path:'/taskManagement',query:{system:'业务管理'}}" v-show="collapseBtn">任务管理</router-link>
        </a-menu-item>
        <!--<a-menu-item key="3" title="地理信息维护">
          <a-icon type="carry-out" />
          <router-link :to="{path:'/areaManage',query:{system:'业务管理'}}" v-show="collapseBtn">地理信息维护</router-link>
        </a-menu-item>-->
<!--         <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="profile" />
            <span>业务需求管理</span>
          </span>
          <a-menu-item key="1">
            <router-link :to="{path:'/needsReport',query:{system:'业务管理'}}">需求上报</router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link :to="{path:'/needsList',query:{system:'业务管理'}}">需求管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title">
            <a-icon type="carry-out" />
            <span>任务管理</span>
          </span>
          <a-menu-item key="3">
            <router-link :to="{path:'/taskCreate',query:{system:'业务管理'}}">任务创建</router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link :to="{path:'/taskApproval',query:{system:'业务管理'}}">任务审批</router-link>
          </a-menu-item>
          <a-menu-item key="5">
            <router-link :to="{path:'/historyTask',query:{system:'业务管理'}}">任务中心</router-link>
          </a-menu-item>
        </a-sub-menu> -->
<!--         <a-sub-menu key="sub3">
          <span slot="title">
            <a-icon type="file-done" />
            <span>基础信息管理</span>
          </span>
          <a-menu-item key="6">
            <router-link :to="{path:'/projectInformation',query:{system:'业务管理'}}">项目信息</router-link>
          </a-menu-item>
          <a-menu-item key="7">
            <router-link :to="{path:'/needsClassify',query:{system:'业务管理'}}">需求分类信息</router-link>
          </a-menu-item>
        </a-sub-menu> -->
      </a-menu>
    </a-layout-sider>
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      v-if="this.$route.query.system==='权限管理'"
    >
      <a-menu
        :selectedKeys="[this.$store.state.firstNavSelectedKey]"
        :openKeys="this.$store.state.openClickSelectedKey"
        @openChange="onOpenChange"
        @click="handleNavClick"
        mode="inline"
        theme="dark"
      >
        <a-menu-item key="0" title="首页">
          <a-icon type="dashboard" />
         <router-link :to="{path:'/permissionManage/dashboard',query:{system:'权限管理'}}" v-show="collapseBtn">首页</router-link>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title">
            <a-icon type="user" />
            <span>用户管理</span>
          </span>
          <a-menu-item key="1">
            <router-link :to="{path:'/userList',query:{system:'权限管理'}}">用户列表</router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link :to="{path:'/roleList',query:{system:'权限管理'}}">角色列表</router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link :to="{path:'/organizeList',query:{system:'权限管理'}}">组织机构列表</router-link>
          </a-menu-item>
<!--          <a-menu-item key="4">
            <router-link :to="{path:'/userApproval',query:{system:'权限管理'}}">用户审批</router-link>
          </a-menu-item> -->
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <div class="headerBar">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="toggleCollapsed"
          />
          <h2>{{this.$route.query.system}}系统</h2>
          <a-dropdown>
            <a class="ant-dropdown-link" href="#" v-if="!!realName">
              <i class="fa fa-user-circle-o"></i>
              {{realName}}
              <a-icon type="down" />
            </a>
            <a class="ant-dropdown-link" href="#" v-else >
              <i class="fa fa-user-circle-o"></i>
              {{userName}}
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
<!--               <a-menu-item>
                <a href="#" @click="editPassword">修改密码</a>
              </a-menu-item> -->
              <a-menu-item>
                <a href="#" @click="logoutBtn">退出系统</a>
                <!-- <router-link to="/Login">退出系统</router-link> -->
              </a-menu-item>
              <a-menu-item v-if="this.$route.query.system==='数据管理'">
                <router-link :to="{path:'/menuConfig',query:{system:'数据管理'}}">配置目录</router-link>
              </a-menu-item>
              <a-menu-item v-if="this.$route.query.system==='数据管理'">
                <router-link :to="{path:'/areaManage',query:{system:'数据管理'}}">地理信息维护</router-link>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <router-link to="/portal">
            <a-badge @click="defaultActive">
              <a>
                <a-icon type="home" theme="filled" />
              </a>
            </a-badge>
          </router-link>
          <!-- <a-input-search placeholder="请输入关键词" @search="onSearch" /> -->
        </div>
        <div class="headerBar" style="display:none">
          <bread-crumb></bread-crumb>
          <a-icon type="sync" @click="refreshPage" />
          <!-- <a-icon type="left" @click="goBack" /> -->
        </div>
      </a-layout-header>
      <a-layout-content>
        <router-view></router-view>
        <pwd-modal
          id="pwdModal"
          ref="pwdModalForm"
          :title="modalTitle"
          :visible="modalVisible"
          :resetPwdId="userId"
          @ok="handleOk"
          @cancel="handleCancel"
        ></pwd-modal>
      </a-layout-content>
      <a-layout-footer>
        <span class="copyright">Copyright © 中国电子科技集团公司第三十二研究所，All Rights Reserved.</span>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import breadCrumb from './breadCrumb';
import pwdModal from './components/pwdModal.vue';
import {
  GETDEADLINETIP,
  LOGOUT,
  GETDATAMANAGEMENU
} from '@/../static/js/apis.js';
import global from "@/../static/global.vue"
export default {
  name: 'pageFrame',
  inject: ['reload'], // 注入App.vue的方法
  data () {
    return {
      userId: '',
      userName: '',
      realName: '',
      tipCount: '',
      modalTitle: '', // modal标题
      modalVisible: false, // modal关闭打开控制器
      collapsed: false,
      openKeys: [],
      collapseBtn: true,
      dataManageMenu: []
    }
  },
  components: {
    breadCrumb,
    pwdModal
  },
  methods: {
    removeActive () {
      this.$store.commit('changeFirstNavSelected', '')
    },
    defaultActive () {
      this.$store.commit('changeFirstNavSelected', '1')
    },
    toggleCollapsed () {
      this.collapsed = !this.collapsed
      this.collapseBtn = !this.collapseBtn
    },
    // 返回上一页
    goBack () {
      this.$router.go(-1)
      this.$store.commit(
        'changeFirstNavSelected',
        this.$store.state.lastFirstSelected
      )
    },
    // 刷新页面
    refreshPage () {
      this.reload()
    },
    // 搜索事件
    /* onSearch (value) {
			console.log(value);
		}, */
    /* 导航点击事件 */
    handleNavClick (e) {

    	 let self = this
      // 记录当前选中导航，以备页面后退使用
      self.$store.commit(
        'changeLastFirst',
        self.$store.state.firstNavSelectedKey
      )
      self.$store.commit('changeFirstNavSelected', e.key)

    },
    setCookie(name, value, seconds){
         seconds = seconds || 0;   //seconds有值就直接赋值，没有为0
        var expires = "";
        if (seconds != 0) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime() + (seconds * 1000));
            expires = "; expires=" + date.toGMTString();
        }
        document.cookie = name + "=" + escape(value) + expires + "; path=/";   //转码并赋值
    },
    logoutBtn () {
       this.setCookie("token", "", -1);
       window.location.href= global.verifyUrl+"/logout?ReturnUrl=" + window.location.href
      // let self = this
      // var param = {
      //   token: localStorage.getItem('token')
      // }
      // LOGOUT(param, function (res) {
      //   self.$router.push({ path: '/guideMenu' })
      // })
    },
    /* 编辑密码 */
    editPassword () {
      this.modalTitle = '修改' + this.userName + '的密码';
      this.modalVisible = true

      // 把数据放入modal，要在form加载完成后

      this.$nextTick(() => {
        this.$refs.pwdModalForm.form.setFieldsValue({
          realName: this.realName,
          userName: this.userName,
          id: this.userId
        })
      })
    },
    /* modal确定事件 */
    handleOk (e) {
      this.modalVisible = false
    },
    /* modal取消事件 */
    handleCancel (e) {
      this.modalVisible = false
    },
    onOpenChange (openKeys) {
      //
      this.$store.commit('openClickSelected', openKeys)
    }
  },
  mounted () {
    let self = this
    // 生命周期函数—开始挂载后挂载完毕前执行
    console.log(localStorage.getItem('username'))
    console.log(localStorage.getItem('realname'))
    this.userName = localStorage.getItem('username')
    this.realName = localStorage.getItem('realname')
    console.log(this.realName)
    console.log(this.userName)
    GETDATAMANAGEMENU({ id: 0 }, function (res) {
      self.dataManageMenu = res.obj
    })


  },
  // created(){
  //      let self = this
  //      if(self.$route.query.system=='数据管理'||self.$route.query.system=='业务管理'||self.$route.query.system=='权限管理'){
  //       self.$store.commit('changeFirstNavSelected', '0')
  //      }
  // }
}
</script>

<style scoped>
/*layout style*/
.ant-layout-has-sider {
  height: 100vh;
}
/*sider*/
/deep/ .ant-menu-item > a {
  display: inline-block;
}
/*header*/
.ant-layout-header {
  height: 60px;
  line-height: 60px;
  background-color: white;
  box-shadow: 0px 3px 5px #a1a1a14d;
  z-index: 9;
}
.headerBar {
  height: 60px;
  line-height: 60px;
}
.headerBar:first-child {
  border-bottom: 1px solid #ccc2;
}
.headerBar h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1890ff;
  text-shadow: 1px 1px 1px #03a9f4;
  margin-bottom: 0px;
  display: inline-block;
}
.headerBar .ant-input-search {
  width: 350px;
  float: right;
  height: 36px;
  display: inline-block;
  margin: 7px auto;
}
.headerBar .ant-dropdown-link {
  float: right;
  margin-left: 50px !important;
  color: #999;
}
.headerBar .ant-badge {
  float: right;
  margin-left: 50px !important;
  color: #999;
  height: 60px;
  line-height: 60px;
}
.headerBar .ant-badge a {
  color: #999;
  font-size: 20px;
}
/deep/ .ant-badge-count {
  line-height: 15px;
  height: 15px;
}
/deep/ .ant-badge-count,
.ant-badge-dot,
.ant-badge .ant-scroll-number-custom-component {
  top: 12px;
}
/*面包屑*/
.headerBar .ant-breadcrumb {
  height: 50px;
  line-height: 50px;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
}
/deep/ .headerBar .ant-breadcrumb .ant-breadcrumb-separator {
  margin: 0 16px;
}
.headerBar .anticon-left,
.headerBar .anticon-sync {
  float: right;
  font-size: 16px;
  margin: 14px;
  font-weight: 700;
}
.headerBar .anticon-left:hover,
.headerBar .anticon-sync:hover {
  cursor: pointer;
  color: #933;
}
/*默认内容*/
.ant-layout-content {
  overflow-y: auto;
}
/*版权*/
.ant-layout-footer {
  text-align: center;
  padding: 5px 50px;
}
.copyright {
  color: #ccc;
  text-align: center;
}
.button-wrapper {
  text-align: center;
  min-height: 40px;
  line-height: 40px;
}
</style>
